.clearfix() {
  &:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

/* 单行溢出 */
.one_txt_cut() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*多行溢出 手机端使用*/
.txt_cut(@line) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @line;
  -webkit-box-orient: vertical;
}

.box_shadow() {
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}


.frow(@justify-content: center, @align-items: center, @flex-direction: row) {
  display: flex;
  justify-content: @justify-content;
  align-items: @align-items;
  flex-direction: @flex-direction;
}


.hairline(@position, @color) {
  &::before,
  &::after {
    position: absolute;
    left: 0;
    right: auto;
    background-color: @color;
    display: block;
    z-index: 3;
  }
  &:before {
    top: 0;
    bottom: auto;
    & when (@position = top) {
      content: '';
      height: 1px;
      width: 100%;
      transform-origin: 50% 0%;
      html[tag='pixel-ratio-2'] & {
        transform: scaleY(0.5);
      }
      html[tag='pixel-ratio-3'] & {
        transform: scaleY(0.33);
      }
    }
  }
  &:after {
    top: auto;
    bottom: 0;
    & when (@position = bottom) {
      content: '';
      height: 1px;
      width: 100%;
      html[tag='pixel-ratio-2'] & {
        transform: scaleY(0.5);
      }
      html[tag='pixel-ratio-3'] & {
        transform: scaleY(0.33);
      }
    }
  }
  &:after {
    left: auto;
    right: 0;
    & when (@position = right) {
      content: '';
      height: 100%;
      width: 1px;
      html[tag='pixel-ratio-2'] & {
        transform: scaleX(0.5);
      }
      html[tag='pixel-ratio-3'] & {
        transform: scaleX(0.33);
      }
    }
  }
}

.buttonBg() {
  color: #fff;
  background: @color_theme;
}

.buttonShadow() {
  box-shadow: 0 6px 10px 0 rgba(237, 213, 160, 0.7);
}

.toGray() {
  filter: grayscale(100%);
  -webkit-filter: grayscale(1);
}

.elip() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hasMore(@right:0, @size: 32px) {
  position: relative;
  padding-right: @right + 32px;
  &::after {
    content: '';
    position: absolute;
    right: @right / 2 + 0;
    top: 50%;
    margin-top: -@size / 2;
    display: block;
    width: @size;
    height: @size;
    font-size: 0;
    background: url('~@/assets/images/page_more.png') right center no-repeat;
    background-size: @size / 2 auto;
  }
}

.listAnimIn() {
  :global {
    animation: fadeInUp 0.6s;
    animation-fill-mode: both;
  }
}

.listAnimRight() {
  :global {
    animation: fadeInRight 0.6s;
    animation-fill-mode: both;
  }
}
